
import Taro, {Component} from '@tarojs/taro'
import {inject, observer} from '@tarojs/mobx'
import {View, Text, Image } from '@tarojs/components'
import './orderDetail.less'

import {getRuntime, subtime, getCaNumber} from '../../utils/common'
import AreaStore from '../../store/AreaStore'
import {IStoreProps} from '../../store/Stores'

interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class OrderDetail extends Component<IHomeProps> {

  state = {
    info: {}, // 订单详情
    carTaxPicture: '',  // 电子税票
    isDownlaod: false, // 是否显示下载弹窗
  }

  componentWillMount() {
    Taro.setNavigationBarTitle({title: '订单详情'})
    let info = getRuntime().getStorage('orderDetail')
    console.log(info)
    AreaStore.getAllProvinceFromLocal({
      callBack: res => {
        res.map(item => {
          if(item.value === info.carOrderDetails[0].province){
            info.provinceText = item.label
          }
        })
      }
    })
    this.setState({
      info,
      carTaxPicture: info.carTaxPicture
    })
  }

  link(url: string = '/pages/index/index', isApply?: boolean = false) {
    if(isApply) {
      let { info } = this.state
      if(!info.carTaxPicture) { getRuntime().showToast('您的订单还未上传税票，不可下载，请耐心等待~'); return false; }
      if(info.isSendTaxPicture) { getRuntime().showToast('您的快递已申请，正在处理中~'); return false; }
    }
    getRuntime().navigateTo(url)
  }

  downLoadCarTaxPicture() {
    let { homeStore } = this.props.stores
    let { info } = this.state
    if(!info.carTaxPicture) { getRuntime().showToast('您的订单还未上传税票，不可下载，请耐心等待~'); return false; }
    homeStore.getCarTaxPicture({
      id: info.id,
      callback: res => {
        if(res.carTaxPicture){
          this.setState({ carTaxPicture: res.carTaxPicture, isDownlaod: true })
        }
      }
    })
  }

  close(e){
    e.preventDefault()
    this.setState({ isDownlaod: false })
  }

  render() {
    let { info, carTaxPicture,isDownlaod } = this.state
    return (
      <View className='packge-detail'>
         <View className='packge__status'>
           <View className='packge__text f32'>{info.statusView}</View>
         </View>

        <View className='line-desc'>
          <View className='line'>
            <View className='line__title'>出单省份: </View>
            <View className='line__con'>{info&&info.provinceText}</View>
          </View>
          <View className='line'>
            <View className='line__title'>车牌号码: </View>
            <View className='line__con'>{getCaNumber(info.carOrderDetails[0]['carNumber'])}</View>
          </View>
          <View className='line'>
            <View className='line__title'>车辆规格: </View>
            <View className='line__con'>{info.carOrderDetails[0]['carSpec']}</View>
          </View>
          <View className='line'>
            <View className='line__title'>缴费金额: </View>
            <View className='line__con color-theme yuan'>{info.carOrderDetails[0]['price']}</View>
          </View>
          <View className='line'>
            <View className='line__title'>纳税年份: </View>
            <View className='line__con'>
              <Text className='after-line'>{info.createYear}</Text>
            </View>
          </View>
        </View>
        <View className='interval' />

        <View className='line-desc'>
          <View className='line'>
            <View className='line__title'>车主姓名: </View>
            <View className='line__con'>{info.carOrderDetails[0]['carUserName']}</View>
          </View>
          {
            info.carOrderDetails[0]&&info.carOrderDetails[0].quality>0&&
            <View className='line'>
               <View className='line__title'>货车整备质量: </View>
               <View className='line__con'>{info.carOrderDetails[0].quality}kg</View>
            </View>
          }
          <View className='line'>
            <View className='line__title'>相关证件: </View>
            <View className='line__con color-theme'>已上传</View>
          </View>
        </View>
        <View className='interval' />

        <View className='line-desc'>
          <View className='line'>
            <View className='line__title'>订单号码: </View>
            <View className='line__con'>{info.orderNo}</View>
          </View>
          <View className='line'>
            <View className='line__title'>缴费时间: </View>
            <View className='line__con'>{subtime(info.creationTime)}</View>
          </View>
        </View>
        <View className='interval' />

        <View className='btn-two-wrap'>
          <View className='btn btn-active' onClick={this.downLoadCarTaxPicture.bind(this)}>下载电子税票</View>
          <View className='btn btn-line-active' onClick={this.link.bind(this, '/pages/order/applyTax?orderId='+info.id, true)}>申请纸质税票</View>
        </View>

        {
          isDownlaod&&
          <View className='dowmload-img' onClick={this.close.bind(this)}>
             <Image className='d-img' src={carTaxPicture} />
             <View className='tip'>长按保存图片(点击空白处关闭弹窗)</View>
          </View>
        }
      </View>
    )
  }
}
export default OrderDetail
